by Yusuf Malluf
When using Visual Basic Script as one of your Internet authoring tools on the Web, it is necessary to know the medium upon which VBScript rests: Hypertext Markup Language, or HTML. HTML is the standard by which World Wide Web documents are served. VBScript and the ActiveX controls provide a greater degree of interaction inside HTML documents. To become more proficient with Visual Basic Script, it is necessary to understand some key components of HTML and how it works, conceptually.
There are two components to creating a hypertext document. The layout or design of the page and the general syntax of Hypertext Markup Language. This chapter primarily deals with the syntax of HTML and the elements that are useful to Visual Basic Script. All of the examples presented in this chapter are created with the use of Microsoft Internet Explorer 3.0 in mind. Many of the HTML elements presented, like style sheets and marquees, are currently supported by Internet Explorer only.
The Hypertext Markup Language is a simple language that was designated as the language for hypertext communication across the Internet. Its initial advantages were its simplicity and its multi-platform flexibility. Today this phenomena is more than just simple text and graphics rendering, it has become the reality of Cyberspace.
There is a standards committee, the World Wide Web Consortium (W3C) which is responsible for establishing standards for HTML and general standards for Internet communication. The W3C is currently.
If you have ever seen HTML or have ever heard it mentioned before, some of the terms that may come to mind are elements, attributes, tags, and values. These are all, indeed, simple to understand; but to gain a better understanding of them you must understand the structure of an HTML document. An HTML document consists of two parts: a header and a body. A header is used in specifying the title of the document, the document's owner, and other miscellaneous information dealing with the document. The body portion of the document is where all the displayable content goes. In an HTML document, the header and the body are specified similarly to what is shown in Listing 2.1. You can also get this listing off the CD-ROM in the file FIRSTHTML.HTM.
Listing 2.1 FIRSTHTML.HTMùA Simple HTML Document Demonstrating Basic Usage
The words surrounded by the < and > brackets are called elements or keywords, whereas the entire keyword including the brackets is called a tag. These tags usually come in pairs, encapsulate a portion of the document, and define what is to happen inside that portion. The <HEAD> and </HEAD> tags naturally specify the header of the document, and the <BODY> and </BODY> pair specifies the body of the document. The tag examples you see in Listing 2.1 consist of a <Name_of_Tag>, which begins the tag, and </Name_of_Tag>, which ends the tag. Everything encapsulated by these tags is affected by it. Tags can be nested, which means certain tags can be within other tags. The <P> and </P> tags which are used to specify a new paragraph block are nested between the <BODY> tags. The <HEAD> and <BODY> tags are both nested in the <HTML> and </HTML> tags (which specify that this is an HTML document).
Remember! You can nest or encapsulate tags in other tags but you can not overlap tags. For instance, the following is not acceptable and is considered bad form:
<I><B>This is just a test</I></B>
The first tag pair, <I> which indicates that the text is placed in italics and the second pair, <B> which renders text as bold are overlapping. In general, tags overlap when a nested tag is closed outside of the tag pair it is nested in.
Many tags cannot be nested. Tags that are permitted in the header section are usually not permitted in the body, and vice versa. Check Appendix B, "HTML Reference," to see which tags are allowed in the header and body of an HTML document.
Let's examine Listing 2.1 a little closer. The tag that begins the body of the document, the <BODY> tag, has this within the brackets: BGCOLOR="#FFFFFF". The BGCOLOR part of the <BODY> tag is called an attribute. The information to the right of the equal sign is called a value. In this case, the attribute, BGCOLOR, is used to specify the background color of the document. Its value, "#FFFFFF" is the hexadecimal value for the color white. An attribute is an additional keyword to an HTML tag which modifies the tag in some manner. In this case, the BGCOLOR attribute specifies what the background color should be. All attributes for a particular tag are specified when the beginning tag is used (notice there are no attributes for the </BODY> tag in Listing 2.1).
It is always a good idea to surround your values with double quotation marks (""), so the browser recognizes all the information passed as a value as one block.
Microsoft Internet Explorer also uses names for major colors, so you can use the value of "white" for the BGCOLOR attribute instead of "#FFFFFF", which is the hexadecimal value for the color white. Over 100 color names are supported in Internet Explorer 3.0 and these can be found in Appendix B. Additionally, you can specify collapsed hexadecimal color values as well (for example: the value "#F0C" is really "#FF00CC") The singular value specified for the red blue or green section (in the form of #RRBBGG) is duplicated into the other R, B or G slot (for example, the "F" value in "#F0C" is expanded to "FF", and so forth, so the entire value to look like: "#FF00CC").
You know have a foundation for an understanding of how HTML works. Many tags follow the "encapsulation" rule where an opening tag and a closing tag encapsulate some text or other tags. However, there are several tags in HTML which have their exceptions and they will be dealt with in their respective sections.
Linking is the process of connecting different hypertext documents and other resources on the Internet (or lately, intranets as well). This is easily done with HTML, but, again, some basic terminology must be understood first. The following list acquaints you with some of these terms.
The tag which is used for anchoring the is the <A> tag, but it has some required attributes. These required attributes are listed in Table 2.1.
Table 2.1 Required Attributes for the <A> Tag
| Attribute | Purpose |
| HREF | Used to reference another URL when the text, pictures or other objects encapsulated in the <A>...</A> tags is clicked. |
| NAME | Used to identify an anchor. This name can be called by other URLS tags with a # appended to the name (for instance, if an <A> tag has NAME="test", then another <A> tag in the document can reference that anchor by <A HREF="#test">...</A> (reference meaning you will go to the place where the named anchor is in the document when clicked.) If the anchor is in another document, then it can be referenced by appending the name, with the preceding number sign to the URL: HREF="http://www.test.com/test1.html#test" would go an anchor with the name "test" in the file test1.htm at the location of www.test.com. |
There are also more attributes that are used with anchor tags, but they are specific to elements like frame sets. The HREF attribute points to some URL, another anchor in the local file or another anchor in a different URL. The NAME attribute can specify a unique identity for each tag in the current or on other HTML documents. Listing 2.2 illustrates how this is done. This listing can also be accessed on the accompanying CD.
The NAME attribute and its new replacement, the ID attribute, have the same function. However, certain tags can not work with the ID attribute (like frames) and some tags will not work with the NAME attribute (like objects).
Listing 2.2 SCNDHTML.HTMùA Simple HTML Document That Shows How Linking Works
This is all there is to hyperlinking, but also keep in mind that you can put many things in an anchor, including pictures, which become clickable images. Other HTML tags that rely on (or are indirectly used by) anchors are image maps, frames, and forms. In Visual Basic Script, the NAME attribute is used extensively throughout documents that contain those scripts because Visual Basic Script has the capability to use those names to make HTML more interactive. You may find, though, that Visual Basic Script is used extensively with forms and input boxes, which are discussed later in this chapter.
Images and multimedia also help to make hypertext documents more interesting. When dealing with graphics, the major HTML tag associated with multimedia is the <IMG> tag. With the <IMG> tag, you can specify what picture to display, and the dimensions of the picture. Also, with an <IMG> tag you can display different animation clips to play. The Microsoft Internet Explorer supports inline AVI animation clips. Listing 2.3 is an example that stresses the major features of the image tag. This example is illustrated in Figure 2.1. Listing 2.3 may also be found on the CD that accompanies the book. Notice that the clickable image has a border around it. Images that are clickable usually are surrounded by a border indicating that it is a link. The attributes for controlling borders and clickable images are covered fully in Appendix B.
Listing 2.3 PICSDEMO.HTM The Different Ways to Use the <IMG> Tag
<HTML>
<HEAD>
<TITLE>This page stresses the major features of the IMG tag.</TITLE>
</HEAD>
<BODY>
<IMG SRC="test.gif" HEIGHT="100" WIDTH="100" ALIGN="left">
This is an image that will be rendered 100x100 pixels <BR CLEAR="left">
<A HREF="test.html"><IMG SRC="test.gif" WIDTH="100" HEIGHT="100">
</A>This image is clickable
<BR CLEAR="left">
<IMG DYNSRC="test,avi" LOOP="infinite" START="mouseover"
WIDTH="100" HEIGHT="100" ALIGN="CENTER">
This a centered picture of an AVI file. Move the mouse over it.
</BODY></HTML>
This figure demonstrates the different uses of the <IMG> tag.
This example displays three different ways to use the IMG tag. The first example displays a normal image that is left aligned, 100 pixels long, and 100 pixels wide. The next is a clickable image, which you can tell because it is encapsulated by the <A></A> tags. The final example shows how to display an AVI animation which plays infinitely (specified by the LOOP attribute) and only plays when the mouse is moved over the animation (specified by the START attribute). One other interesting HTML addition is the MARQUEE tag. With this tag, you can make text and other objects encapsulated in the marquee scroll across the screen. Graphics and multimedia are very useful for Visual Basic Script and the ActiveX environment, because it obviously enhances the interaction capability of the page by providing interactive animations and even games. More information on both these tags can be found in Appendix B at the end of the book.
HTML forms are where Visual Basic Scripts can be very handy and helpful to use. Originally, forms were usually processed and validated the Common Gateway Interface (CGI). With the CGI method, a third source was involved in processing and validating all the information provided by forms and other interactive programs. This was usually implemented by the Web server that hosted these pages. With the introduction of scripting languages, such as Microsoft's Visual Basic Script and Sun's Java, everything has changed. With the inline scripting capabilities provided by these script languages, most of the processing is done at the client's side, or on your computer. As a matter of fact, many tasks involving scripting can be done on the client's side.
In this section, forms are covered in depth, since they are one of the major applications of Visual Basic Script. Forms are fairly simple, but there are several more HTML elements that make forms what they are. A pair of <FORM> tags encapsulate everything that is related to the form, and everything that is submitted in that form. The form's controls can include input boxes for entering text, radio buttons for specifying one choice out of several, select boxes, which are drop-down menus of different selections, and buttons, which can reset, submit, or perform other tasks with the form. According to the HTML specification, the general syntax for specifying a form is:
<FORM ACTION="POST/GET" METHOD="URL"> ... </FORM>
The ACTION attribute specifies what URL to go to for processing data. The METHOD attribute specifies what method the data should be given for processing by the URL specified by ACTION. However, the ACTION and the METHOD attributes are not necessarily needed for use in Visual Basic Script. Since the script is being used internally, it is redundant to specify what URL is needed to process the form. The following example shows how Visual Basic Script uses a form. You don't need to understand all the specifics of the form now, because they are fully covered later in this chapter or in subsequent ones. Listing 2.4, FORMDEMO.HTM is a simple form. This listing is illustrated in Figure 2.2 and can be found on the CD under the file name FORMDEMO.HTM.
Listing 2.4 FORMDEMO.HTMùA Simple HTML Document That Demonstrates How a Form Works with VBScript
When viewed with Internet Explorer 3.0, the first text box has the text "Default" and the second text box has the text "Hello." When you click the button, the text in the first box replaces that in the second, producing "Default" in both boxes. This example is shown in Figure 2.2.
An example of a form created with VBScript. This is a pretty simple form with some Visual Basic Script capabilities.
There are a few new tags to consider in this document. The tags such as <FONT> and <PRE> are for cosmetic purposes only. The substance of this document lies in the <FORM> and <SCRIPT> tags. The form and its controls (for example, input boxes, radio buttons, and so on) are just HTML tags, and everything inside the <SCRIPT> tags is Visual Basic Script used for manipulating those tags.
Let's consider a few things inside the form. First, we assign the form a name, "me", and this is the name used by the script. Next, we have a few <INPUT> tags with no </INPUT> because they do not encapsulate any text, but define a control to use, the control's name, and any values associated with it. Finally, we have a button control, and that is the end of the form. The <INPUT> tags both have a NAME, TYPE, and VALUE attribute. The TYPE attribute in each tag is set to "text," which is a text input box with a size of 50 characters. The NAME is the input box's unique identifier and the VALUE is the default value that is first seen in the box when the page is viewed. Table 2.2 shows the different form controls, specified by the TYPE attribute and used in the <INPUT> tag.
Table 2.2 Values of Form Controls Used by the TYPE Attribute of the <INPUT> Tag
| TYPE Value | Function |
| "text" | Specifies a one-line text box. |
| "password" | Similar to the "text" value, except the characters are not seen and are usually replaced by one similar character. |
| "radio" | Can specify a series of buttons with the same value for the NAME attribute, but only one of the buttons can be chosen. |
| "checkbox" | Specifies individual text boxes with different values for NAME; additionally, the VALUE attribute must have a value of TRUE or FALSE (TRUE means it is initially checked and FALSE means it is not initially checked. |
| "hidden" | Specifies a hidden field, which should contain a VALUE attribute. This control is not seen by the user. |
| "submit" | Creates a button that submits the form to the URL specified by the ACTION attribute of the FORM tag. |
| "reset" | Creates a button that clears all the entries on the form. |
| "button" | Creates a button that can be referenced by Visual Basic Script; a name can be given to the button (and all buttons) by giving a value to the NAME attribute. A name that is displayed on the button can be given by assigning a value to the VALUE attribute of the button. |
| "image" | Instantly submits the form when clicked, with the coordinates of the position of the mouse-click on that image. |
| "textarea" | Specifies several lines of input text similar to the one-line text box control. |
The image control requires the additional attribute, SRC to specify a graphic to use. All input types should have a NAME or ID tag to be manipulated by Visual Basic Script. The size allotted to the text control is lengthwiseùfor example, <INPUT...SIZE="50">ùwhereas the textarea control's size is given by length and height, respectivelyùfor example, <INPUT...SIZE="50,50">.
In addition to the input tag, there are also a few other controls, such as combo boxes and drop-down lists, that can be used in forms and manipulated by Visual Basic Script. These additional tags are shown in Table 2.3.
Table 2.3 Additional Form Tags
| Control Tag | Function |
| <SELECT> | Can specify a drop-down list or a list box depending on whether the attribute MULTIPLE (has no value) is present. If MULTIPLE is present, then it is a scrollable list box, which allows the user to select more than one option from the list. |
| <OPTION> | Is encapsulated inside the <SELECT> tags and specifies the name and values for the various list options of that combo box or drop-down box with the NAME and VALUE attributes. |
The SELECT tag, unlike the INPUT tag, has a closing tag (for example, <SELECT>...</SELECT>). The NAME and VALUE attributes associated with the OPTION tag deal with the data that is submitted when that option is selected, and not with the text that is displayed when the form is viewed. The text which describes the option on the screen immediately follows the <OPTION> tag (for example, <OPTION >Displayed text here). The <OPTION> tag does not have a closing tag.
This wraps up forms and their usage. For a more elaborate example that uses all the FORM controls, refer to FORMCOMP.HTM (on the CD), which has output as shown in Figure 2.3. The other major tag mentioned, the SCRIPT tag, is used to specify a scripting language to use. In this book, the script language is exclusively Visual Basic Script. The LANGUAGE attribute of the SCRIPT tag defines what language the script is interpreted in. The value for this language, "VBScript", specifies Visual Basic Script. The SCRIPT tag also has a closing tag.
A more complete demonstration of forms.
Make sure you include the closing tag, </SCRIPT>, at the end of your Visual Basic Script; otherwise it does not execute.
It may be helpful to surround your entire Visual Basic Script with a comment so the script is not displayed on browsers that do not support it.
To this point we have discussed HTML entities that will more or less remain the same with minor additions now and then. In this section, many of the important extensions made to HTML are covered. It is fair to say that Netscape Communications, Inc. was the first company to implement several extensions to the HTML language, including background colors, the ability to center text, frames, and so on. Microsoft and its product, the Internet Explorer, has also made many contributions to HTML including client-side image maps, marquees, smoother support for tables and frames, objects, and, of course, the ActiveX controls. Many of these entities such as objects and the ActiveX controls are very useful to Visual Basic Scriptùsome of which were demonstrated in Figure 2.3. As previously stated, the tags and entities dealt with in this section have great potential for change, as the standards have not yet been decided on by the HTML standards committee at the World Wide Web Consortium (W3C).
A system of base attributes, which are intrinsic to every tag, has been proposed and is largely implemented in Internet Explorer's implementation of HTML. Table 2.4 lists some of the base attributes which have been already implemented and a brief explanation. Also remember that these tags primarily effect tags that are used to render text.
Table 2.4 Supported Base Attributes
| Attribute name | Purpose |
| CLASS | Used to commonly group a tag or set of tags. This base attribute is used mostly with Style Sheets to specify rendering properties for different classes (groups) of tags. |
| ID and NAME | Used to identify other tags besides the anchor tag. These tags are also used with style sheets to set certain styles to tags which have styles for the name they use in the style section of a document (see the style section). In future versions of Internet Explorer 3.0 however, there might be support for the <A> to access other tags with NAME and ID attributes in the same manner as it would access other <A> tags with the NAME/ID attribute. |
In addition to entire tags extending the HTML language, there have been several minor extensions to existing tags, some of which were demonstrated in prior sections. These are covered here, briefly.
To begin with, the IMG tag has the attribute extension, DYNSRC, which allows the author to embed inline AVI animations. The DYNSRC attribute specifies which animation to play that has several additional attributes that enable you to customize the way the AVI animation looks and plays. When you encapsulate an image tag with an anchor, you can allow a Visual Basic Script to utilize this image from within the script(demonstrated in Figure 2.3).
The input tag that is used inside the form to specify form controls also has the new button control, which allows you to specify other buttons on the form instead of your every day submit and reset buttons. The ALIGN attribute works with most of the HTML tags which affect text in some manner. The ALIGN attribute is used to specify where the text or other object should be displayedùusually with the values "left" and "right", although "center" is used, it has not been implemented on all tags.
The introduction of tables into the HTML language has vastly improved the way data is handled and content is served. Tables provide an efficient way to handle and organize data and Web pages, which formerly would have been accomplished by images and pre-formatted text tags! This section discusses the table's basic usage, the various types of tables supported, and a couple of methods for implementing different tables.
Figure 2.4 is an example of a basic HTML table, which has several rows and columns and a caption.
A sample HTML table. This table demonstrates several of the basic tags used in tables.
The code for this table is in Listing 2.5, which can be found on the CD in the file TABLE1.HTM.
Listing 2.5 TABLE1.HTMùA Brief Example of Tables in HTML
A table in HTML, which is similar to the form, uses the <TABLE> and </TABLE> tags, which initiate the table and specify the table boundaries (everything inside the <TABLE> tags is affected by the table). Table 2.5 lists the four major tags used inside a table.
Table 2.5 The Four Main Tags for a Table
| Table Tag | Purpose |
| <CAPTION> | Specifies a caption for the table. |
| <TR> | Specifies a row to be used in the table. This should be the first tag used when actually constructing a table. |
| <TH> | Any test or HTML that is inside the <TH> tags is considered the heading of the table. Each instance of the <TH> tag denotes a cell in the table which must be encapsulated in the <TR> tag. All cells that are in a <TR> tag are arranged horizontallyùfor example: <TR><TH>Header 1</TH><TH>Header 2</TH></TR> would be a row with two columns; the first column has "Header 1" as its text and the second "Header 2" as its text. By default, all text encapsulated in the <TH> tags is centered and rendered in bold. |
| <TD> | Specifies table data in the form of cells which functions the same as a <TH> tag does. All instanced of <TD> nested in a <TR> tag are placed horizontally in columns. |
The four major tags listed in Table 2.5 were used in Listing 2.5. There are also attributes to each of these tags. The attributes listed in Table 2.6 will work with the <TR>, <TH>, <TD>, and <TABLE> tags. The <TR>, <TH>, <TD>, and <TABLE> tags work by inheritance. Inheritance, in terms of HTML, means that whatever attributes are specified by a tag are used by tags which are encapsulated by it. However, if these child tags (tags that are encapsulated by the parent tag) have their own attributes defined, then these are used instead for tables.
Table 2.6 Attributes for <TABLE> Tags
| Attribute | Function |
| ALIGN | Specifies the alignment of the table or text in the table. Values of "left" and "right" are supported. |
| BGCOLOR | Specifies the background color of the table, which uses either Internet Explorer colors or colors given by hexadecimal RBG. |
| BACKGROUND | Specifies an image to use as a background of table cells. The image is tiled. |
| BORDERCOLOR | Specifies the color of the border of the table. Works similarly to BGCOLOR. |
| VALIGN | Specifies where the text is to be vertically aligned in each cell. Values for this attribute are "top", "bottom", "middle" and "baseline". |
| COLSPAN | Specifies how many columns a particular cell should span across (used with <TD> and <TH> only). |
| ROWSPAN | Specifies how many rows a particular cell should span across (used with <TD> and <TH> only). |
| WIDTH | Similar to COLSPAN, except that pixels or a percentage of the screen are used for the span value. |
| HEIGHT | Similar to ROWSPAN, except that pixels or a percentage of the screen are used for the span value. |
Additionally, there are other, minor attributes dealing with detail in border color and spacing that are not covered here. A full review of table styles can be found in Appendix B, "HTML Reference," of this book. For extensive coverage on the HTML language, check out Que's Special Edition Using HTML.
There are also different styles for tables. Some tables can be defined in terms of header, body, and footer, and some can be defined in terms of columns instead of rows, according to the HTML 3.0 Standard. Borderless tables can be used to make a page look very stylish by using them to set different areas of the page with different background colors or images in the table's cells. Listing 2.6 shows how to use borderless tables with different background colors and images to make a page look interesting. Figure 2.5 illustrates Listing 2.6. You can find the listing on the CD-ROM in the file TABLE2.HTM.
Listing 2.6 TABLE2.HTMùSome Techniques for Creating an Interesting Page with Tables
This is an example table of Listing 2.6. This figure illustrates some of the techniques used for making stylish tables.
Consider Listing 2.6; two tables were used in this example. There are several interesting ways tables are used here. First, the lengths and widths of each of the table's cells are not uniformly positioned which causes different areas covered by these widths to contain different colors and styles. Also notice the Marquee that is nested in the <TD> tag with a width of 500 pixels, which spans across the screen to the cell which contains the AVI of the Earth spinning. The airplane shown, and other icons can be displayed in this manner by using the Wingdings or Dingbats fonts (the <FONT> tag should surround the marquee, but not vice versa). The example in Listing 2.6 demonstrates a basic method of page layout. Other alternatives include style sheets (which are covered in this chapter) and ActiveX controls (which are covered in depth in Chapter 11, "Designing VBScript Applications").
This section discusses one of the more recent extensions to the HTML language, which allows the existence of multiple HTML documents or other resources on one page. Frame sets are an efficient, neat, and effective way to organize and present information in an HTML document. Frame sets are a group of frames in an HTML document each of which display a different resource (an HTML file, for instance).
A frame set is relatively simple to understand. Frame sets are used within the <BODY> tag and replace any content which would otherwise exist inside the body of a document. There are two parts to a frame set. The general tag for specifying a frame set and the properties of all frames in the frame set (this tag is the <FRAMESET> tag) and the tag which is used to indicate the frames (the <FRAME> tag). The general syntax is expressed in the following syntax section. A simple demonstration of a frame set is shown in Figure 2.6. The code to this figure is in Listing 2.7.
This figure illustrates some basic uses of frames.
Listing 2.7 MAINFRAME.HTMùThe HTML File That Specifies All the Other Frames and Files to Use
Notice that there are a few new tags introduced with frame sets. The first tag, the <FRAMESET> tag is used to define the length of the frames, how many there are and how they are to be rendered. Next, we have the <FRAME> tag which is used for specifying the actual content of the frame which was defined by the <FRAMESET> tag (see Listing 2.8). The SRC attribute of the <FRAME> tag is used to specify the URL of the file it is to display. These files are below.
Listing 2.8 FRMFILE1.HTMùFirst File Used with Frames
<BODY BGCOLOR="LIME" TEXT="PURPLE">
<CENTER>
<FONT SIZE="5" FACE="Matura MT Script Capitals" COLOR="PURPLE">
My File</FONT></CENTER>
<HR>
This is the daily chatter column; anything goes here, except
you shouldn't be overly rude or excessively fastidious. Here
is the first frame, hope you enjoy!!
<HR>
</BODY>
This is the first file used with the first frame defined in the previous code example. The files displayed in frames are nothing but individual HTML documents, so whatever you can do in an HTML document is valid content for a frame. Listing 2.9 illustrated another use of frames.
Listing 2.9 FRMFILE2.HTMùSecond File Used with Frames
This is the second file which is used with the second frame. It is also another HTML document. Since you can use any HTML document for content for a frame, you can also add background colors or images to the frames.
The tag used to specify a frame set is the <FRAMESET> tag and it has a closing tag, </FRAMESET>. Contrast this to the <FRAME> tag that has just one tag specifying what is to be in a frame. Some attributes for the <FRAMESET> tag are in Table 2.7 and the general syntax is below:
<FRAMESET>
<FRAME>
...
</FRAMESET>
There are also a few required attributes for the <FRAMESET> and the <FRAME> tags and they are listed in Tables 2.7 and 2.8. Figure 2.6 illustrates a simple layout of a frame set. The files MAINFRAME.HTM, FRMFILE1.HTM and FRMFILE2.HTM are used for this example and can also be found on the accompanying CD.
Table 2.7 Required Attributes for the <FRAMESET> Tag
| Attribute | Function |
| COLS | Used to specify the number of columns in a frame set and their width. The number of columns in a frame set is specified by how many comma separated values exist for this attribute (the values represent the columns width). |
| ROWS | Used to specify the number of rows and each row's height in a frame set. The number of rows in a frame set is specified by how may comma separated values exist (these values specify the length of each row). |
In the <FRAMESET> tag, either the ROWS attribute or the COLS attribute can be used, but not both. The ROWS and COLS attributes are used in specifying how many frames are to exist in a frame set, their width or height and how they should be displayed (as rows or columns, based on which attribute is used). The number of frames that are to exist in and their length are both specified at once. The number of frames are specified by how many comma-separated values exist in the ROWS or COLS attributes. These comma separated values specify the length of each frames. So if you have 3 length specified for the ROWS or COLS attributes, then you use three frames, or other nested <FRAMESET> tags. For example, if one wanted a frame set which consist of two columns, one that is 300 pixels and the other which takes up the remainder of the space they would do the following:
<FRAMESET COLS="300,*">
<FRAME SRC="somefile.htm">
<FRAME SRC="somefile2.htm">
</FRAMESET>
Note that two <FRAME> tags are used. There are two <FRAME> tags since there are two values specified. The <FRAME> tags correspond to the lengths specified by the <FRAMESET> tag in the same order that they are specified. So the first value of 300 in the COLS attribute is assigned to the first frame specified, and so on. There are three ways to specify a length for the COLS and ROWS attributes. These valid values are in the following list.
The attributes for <FRAME> are in Table 2.8.
Table 2.8ùAttributes for the <FRAME> Tag
| Attribute | Function |
| SRC | Specifies what URL the frame should point to. |
| NAME | Gives an identification to the frame, so other links can manipulate the frame. |
| SCROLLING | Specifies if the frame is capable of scrolling (valid values are "Yes" and "No"). |
| NORESIZE | Is an attribute with no value. It is inserted into the <FRAME> tag if the person designing the frames does not want the user to resize the frame. |
| FRAMEBORDER | Specifies if the frame has a border (valid values are "Yes" or "No"). |
| FRAMESPACING | Makes the spacing between frames larger. |
Again, note that these are not all the attributes that are available for the <FRAME> tag. There are other attributes, however; they are either for cosmetic purposes. These minor attributes are covered fully in Appendix B, "HTML Reference."
For browsers that do not currently support frames, you can add the tag <NOFRAMES> to the very end of your document and treat the content encapsulated in the <NOFRAME> tags like the content in a normal HTML document, which has <BODY> tags.
As previously mentioned, you can manipulate frames in HTML with anchor tags and anything else that can reference another URL. To do this, you must include the TARGET attribute in your anchor tag. Whatever URL the anchor is pointing to is displayed in the frame specified by the TARGET attribute when that anchor is clicked. The TARGET attribute is used to specify the name of the frame to put the resource in. If you have a frame named "test1," to access that frame through a link, you would have to put TARGET="test1" as an attribute in the anchor tag. Refer to Listings 2.10û2.13 for a full example. This example covers the basic uses of frames that we have already discussed. These listings can also be found on the accompanying CD under their respective file names. Figure 2.7 illustrates this basic example.
Listing 2.10 FRAME2.HTMùAn Example of Frames and the TARGET Attribute
Listing 2.11 LINKS.HTMùThis is the First Frame of the Frame Set
Listing 2.12ùBLANK.HTMù This Is a Blank File Used by the Second Frame
An example of frames and the TARGET attribute.
This is a simple frame set demonstration that allows content specified by links in the first frame to be placed in the second frame when clicked. The TARGET attribute also has several special values which are listed under the Frames section of Appendix B.
When using frame sets and Visual Basic Script together, you are providing a higher level of interactive HTML documents and Web pages. With Visual Basic Script and frame sets, you can make interactive games, more advanced ordering systems, and electronic catalogs. You can use Visual Basic Script inside each frame and scripts that are used in other frames in the frame set can be accessed using the frames collection of Visual Basic Script (refer to chapter 11 for a description of the frames collection under the Internet Explorer 3.0 Object Model section).
This section basically covers frame sets and their usage. Next we'll look at some very recent components of HTML that work very nicely with Visual Basic Script.
Scripts are the whole basis for Visual Basic Script and other inline scripting languages. Scripts are used for a number of things in an HTML page. Some of these tasks have already been mentioned, like a validation tool for forms, games and electronic magazines (E-zines).
The <SCRIPT> tag specifies what scripting language to use in the HTML document. There are also several attributes that make the <SCRIPT> tag as advanced or as simple as you want. For most purposes, though, only the LANGUAGE attribute needs to be used. This attribute specifies which language to use. If the language is Visual Basic Script, then you would insert the following in your <SCRIPT> tag: LANGUAGE="VBScript". If the language is Sun's JavaScript, then LANGUAGE="Javascript", and so on. Table 2.9 shows the different attributes used with the <SCRIPT> tag.
Table 2.9 Attributes for the <SCRIPT> Tag
| LANGUAGE | Specifies the language the corresponding script uses |
| IN | Specifies what the script should "bind" to, as in a form or some other group of elements that fall under one NAME or ID. For example, if a form was named "form1" and you wanted to access the controls in that form with VBScript, then you would use: in="form1", which specifies that this script is used for the controls in this form. |
If you are not familiar with HTML beyond what you have read in this chapter, it is recommended that you review Appendix B, "HTML Reference," to understand the tags discussed in this section, which not mentioned in this chapter.
Style sheets are the newest introduction to the HTML Language. Style sheets allow a user to have a collection of HTML documents or an entire Web site use one or several formats of style which was formerly accomplished by the tedious task of inserting many <FONT> tags, graphics and other miscellany into an HTML document. Microsoft Internet Explorer is the first browser to implement style sheets to a useable level. Formerly, the UNIX based browser, Arena had some style sheet support but lakcs in many areas support; Microsoft Internet Explorer hosts several additional features to its style sheet implementation. This section covers the concept of style sheets, how to use style sheets and their integration with HTML.
This section describes the concept behind style sheets and how they work. A style sheet does not only apply to the page's style in general, but also to the tags used on that page. For instance if one wanted all <H1> headers in a page to be rendered as a size 14 pt. and the face of the font to be Arial, he or she could used style sheets to change all those headers. If one only wanted specific <H1> headers to be 14 pt. and Arial, and other 16 pt. and Matura, he or she could use the CLASS base attribute to assign certain headers to be of the former style and other headers to be the latter style.
This section covers the syntax of style sheets, how and when to use them. The syntax for style sheets is a little different from the syntax of HTML but it is almost as simple. There are three major ways to use style sheets with an HTML document and they are in the following list.
Syntax
This section covers the general syntax for defining styles for different elements in HTML. When specifying a series of styles that are located in a file you have to use the <LINK> tag in this format:
<LINK REL="STYLE" TYPE="text/css" SRC="URL">
The <LINK> tag is used to specify files that are related to the document with that link tag. The attributes in this link tag are described in Table 2.10.
Table 2.10 Attributes of the Link Tags for Style Sheets
| Attribute | Function |
| REL | Specifies a relationship for the <LINK> tag. In this case, the file specified in the <LINK> tag has the relationship "style" which, of course, indicates that the corresponding file is a style sheet. |
| TYPE | Specifies a MIME type which states that the text in the file specified is a style sheet. The value "text/css" is used to indicate that the file is a style sheet. |
| SRC | Specifies the name of the file to use. This can either be the name of the file (I.E. style.css) or the URL to that file (http://www.somewhere.org/styles/style.css). |
The file method for specifying a style sheet works across a server only, which means that this method will not work on your machine alone. The file must be requested across the server. The server must have the MIME type: text/css for the extension .css for this method to work across a server.
You should always name your files that contain style information with the extension .css, so it is recognizable by the server as a style sheet file.
When you specify inline style information, you have to use the <STYLE> tag, which should be used outside of the body of an HTML document (preferably inside the header of the document). The <STYLE> tag also has a closing tag </STYLE> and all the defined styles are to be encapsulated in the <STYLE> tags. Each defined element can have a series of styles; the syntax is listed below:
TAGNAME {style1: value1; style2: value2; ...}
When you use style definitions which are on a separate file, you use the syntax in this section, without the <STYLE> tags. Any number of style definitions can exist in this file.
TAGNAME is a pseudonym for any text rendering HTML element. Following this tag is a pair of curly braces ({ and }) in which are all the style properties for that element's corresponding tag (the element with the "<" and ">" brackets); style1 and stlye2 ... are pseudonyms for the different style properties for that element. Note how this varies from attributes and values in HTML. A property and its value, in style sheet syntax, are separated by a colon instead of the equal sign.
For instance:
A {text-decoration: none}
is used to specify no additives to the <A> (anchor) tag (like underlines and strikethrough). Text-decoration is a property of the A tag which is set to the value none which means no text decoration. All tags share the same set of properties listed in Table 2.11.
Table 2.11 Style Properties for Use with Different HTML Elements
| Property Name | Function and Allowed Values |
| font-family | Specifies the fonts used with the specified element. Any font name is allowed (as long as the font is on the user's systemùsee the appendix under the <FONT> tag for some common fonts. Fonts can be separated by commas to indicated different fonts to use. (for example: ...{font-family: Arial, Times} If the first font in the list is not available, the browser checks to see if the next is available, and so on until it finds a font that is on the user's system, if none of the specified fonts exist, the default font (Times New Roman) is used. Any number of fonts can be specified. |
| font-size | Specifies the size of the font using several different measurements, listed in Table 2.12. Valid values for font size's are a number with one of the abbreviations listed in Table 2.12 appended to it. |
| font-weight | Specifies the weight of the font. Valid values are bold and normal (ie: ...{font-weight: bold; ...} sets the font-weight for the specified element to bold. |
| font-style | Sets the style of the font. Only the value of italic is supported currently (for example: ...{font-style:italic;...) would set the style of the corresponding element to italics. |
| text-decoration | Specifies some additional text decoration to the corresponding element. Values allowed are: none (this removes all text decoration), line-through (this draws a line through the text) and underline (underlines the text). |
| line-height | Specifies a height of a line for an element. There are several possible measurement values you can use, listed in table 2.6 (for example: ...{line-height: 5cm; ...} makes the height of each line for the specified element 5 centimeters. Extra spacing (unused spacing) is placed before lines. |
| background | Specifies a background color or image. There are a few ways to specify background colors and images. You can specify a color name (for example: {...background: forestgreen...}; you can specify a color using a hexadecimal value (for example:{...background: #FF00CC...} or you can specify a URL to an image (for example: {...background URL(http://myimage.com/imag.gif);...} note that the location of the image is surrounded in brackets. You can specify multiple values for this property. For instance, if the specified background does not exist, then you can use a background color (...{background: url(http://www.grfics.com/pic.gif) seagreen} specifies to use the bakground image pic.gif and use the background color seagreen. |
| margin-left | Specifies the length of the left margin for the specified element. The value in the length can be any of the measurements listed in table 2.12 (for example: {el]{margin-left: 10in;...}) sets the left margin at 10 inches. |
| margin-right | Specifies the length of the right margin for the specified element. The value in the length can be any of the measurements listed in table 2.12 (for example: {el]{margin-right: 10in;...}) sets the right margin at 10 inches. |
| text-indent | Sets the indentation for each paragraph for the specified element, when the specified element's tag is used in the document to begin a paragraph block. |
| text-align | Sets the alignment for the specified element. Valid values are: left, center and right. |
| color | Specifies the color of the text that is encapsulated by the element's tag. The color can be a color name or a hexadecimal #RRGGBB value (see Appendix B for a valid list of color names), values are specified in the same manner as the background property. |
The abbreviations in Table 2.12 are appended to the end of a size specified for several of the properties of Table 2.11. For instance: the property margin-right can use any of the measurements listed below, all that is needed in the length with the abbreviation appended to the end of the length (for example, magin-left: 5in would be 5 inches for the left margin).
Table 2.12 Measurement Sizes Used with Different Properties of Style Sheets
| Measurement Name | Abbreviation | Description |
| Points | pt | Points are a measurement of font size. The default font on a web page is 10ptû12pt. |
| Pixels | px | Pixels are a measurement of screen pixels. Pixels are relatively small compared to the other units. |
| Centimeters | cm | Centimeters are 1/100 of a meter (.39 of an inch). |
| Inches | in | Inches are a United States standard measurement (1/12 of a foot, 2.5 centimeters) |
In addition to the properties listed in table 2.11, there is also the font property which is used for specifying several properties for a font at once. The general syntax for specifying many different values of style for the font property is:
...{font: italic bold font size/line height fonts; ...}
The values font and italic for this property are literal. You use them to specify whether the font is italic, bold or both (if both are specified). The "font size" section is used in specifying the size of the font in the same way as the font-size property and the "line height" section is used in specifying the height of each line, exactly like the line-height property (the "/" in the syntax does separate the two values; for example: 12pt/14pt specifies a font size of 12 pt and a line height of 14pt). The "fonts" section is used is used in specifying a font to use and alternative fonts to use, the same way as the font-family property (multiple fonts are separated by columns and should be in quotations: for example: "Arial, Times, Symbol"). These properties should be used in the same order as indicated in the syntax or the current implementation of this property may exhibit some strange behavior (like add additional line spacing).
Here's a full example:
P {font: bold italic 12tp/18pt Times}
In this example, we used the font property for the P element. We set both the bold and italic attributes, we made the font soze 12pt and the line height 18pt. We specified one font: Times.
A brief mention of base attributes where mentioned in a prior section. One of their major applications, besides Visual Basic Script is style sheets. For complex documents that required many different fonts and styles (an E-zine, for instance) you can use the system of classes in an HTML document to conveniently use multiple styles for a tag specified in the <STYLE> section. Additionally you can use the ID/NAME tag to reference different styles you have defined. The method for accomplishing both of these are listed in the next sections.
You understand that the CLASS attribute is used inside an HTML tag, now, how do you use this attribute to have many defined styles for the same tag? The method is simple. You append a . with a class name of your choosing to the end of the TAGNAME portion of a style definition for an element. Now, using the corresponding tag in an HTML document, you can use the style you specified for that tag if you set the CLASS attribute of that tag equal to the name you chose (without the .).
For example:
<HEAD>
...
<STYLE>
A.weird {text.decoration: none; color: navajowhite}
</STYLE>
</HEAD>
<BODY>
<A HREF="http://www.someplacefaraway.com/" CLASS="weird">
...
</BODY>
In this example, we chose to give the A element a certain style. We also assigned this style definition a class: weird. When we want to use the style defined by the weird class for the A element, we just call that class name from the corresponding tag in the body portion of the document.
Remember: a tag is an element with the "<" and ">" brackets surrounding it.
When you are using the CLASS attribute with HTML for style sheets, you must have a must have a class specified for the tag you are using (for example, if you had the element B which was part of the class "test", you could not use this class with the <A> tag unless you had a style specified for the A element in the "test" class). Now, to use different defined styles for the same tag, you just append a different class name to the element in the <STYLE> section and call that class from your respective tag in the body of your document.
For example:
... <HEAD> ... <STYLE> A.foo {text-decoration:none; color: hotpink} A.bar {color: gray; font-size: 14pt} </STYLE> </HEAD> <BODY> <A CLASS="foo" HREF="http://www.rt66.com/iymalluf/">Go to the MCS [ccc] Web site</A><BR> <A CLASS="bar" HREF="http://www.microsoft.com">The Microsoft Web site</A><BR> <A HREF="http://www.farawayforgottenland.ffl">This goes nowhere</A><BR> ... Note in this snippet code that there are two classes used in the style section: "foo" and "bar". The A element is used in both these classes and the first two <A> tags in the body references those classes. Note that the third <A> tag there is no class specified. It uses the default style. If there was a style specified for just the <A> tag then that style would be used if the tag did not use any class.
The A element, when used in style sheets, has to "pseudo-classes" which are used to set the different styles of a visited link and unvisited link. These are: A:link and A:vlink and all the properties for each "pseudo-class" are specified in the same manner as the normal syntax (for example: a:link {color: red} and A:vlink {font-size:12in}).
You can also use the ID/NAME attribute with HTML tags to use a particular style you have define. Normally, you would define styles with an element preceding a set of curly braces which contain all the properties to that element. Now, instead of specifying a styles for a specific element, you can specify these styles for a name that you choose (the name must be preceded by the # sign). You then reference this name from your tags with the ID attribute. This tag then has all the styles that you specified for that name in the <STYLE> section. For instance:
...
<STYLE>
#mystyle {color:pink; background: aliceblue; font-size: 4in}
...
</STYLE>
...
<BODY>
<P ID="mystyle"> Hi!! I should have a pink background and I should be
[ccc] pretty large</P>
...
In this example, we chose the name: mystyle and gave it a few properties shown. Then, from the body of the document, we used the <P> tag to call this style. We set the ID attribute of the <P> tag to "mystyle" which is where we have defined our styles for this particular name. When calling the name from your tags, you do not use the number sign. You can use this method for any element, but it would not be a good idea to use it with the <A> tag or other tags which need the ID attribute. For their case, it is safer to use classes or just define styles for those tags.
This section covers two tags and an additional attribute which change the style of HTML tags in a different document. There are two tags: the <DIV> and <SPAN> tags which allow one to encapsulate a block of text or other tags and apply a style to them. The STYLE attribute, which can be used in any tag is also capable of setting different styles for the text that tag encapsulates (effective in tags which render text somehow).
The STYLE attribute, as previously mentioned, is capable of setting many style properties for the tag that it is used in. The text that tag encapsulates then receives those styles. The values for the STYLE attribute are the different style properties mentioned in table 2.12 and their values with each property separated by a semicolon (for example: STLYE="color: blue; font-size: 30px; ..."). The STYLE attribute is a simple way to give bits and pieces of your text different styles if want explicit styles to exist, or if you feel no need for defining multiple styles for several elements.
The <DIV> and <SPAN> tags, which are very similar to each other, are used to encapsulate blocks of text and tags and apply a style to them. This could be tediously accomplished with the STYLE tag, but these tags make it easier.
The <DIV> Tag
The <DIV> tag is used to divide of sections of the document and apply a style too that section. Consider the use for this tag. Maybe you have a set of pre-defined styles in the page. Maybe you are quoting some one's work as reference and you want that section of your document to be italicized and also have an inch more of margin space on the right and left sides. All you would have to do is simply encapsulated the entire cited text with the <DIV> and </DIV> tags. Then you use the STYLE attribute and set the properties for spacing and italics:
In this example, we set the left-margin, right-margin and font-style attributes. Whatever text that is encapsulated by this tag inherits the properties specified by this tag. Style sheets also work by inheritance (refer to the Nesting and Inheritance section for more information). The <DIV> tag can also use classes and the ID attribute for defining its own style in the style section as well. You would put the DIV element in a class the same way you would any other element: append the name of a class you choose (with the .) to the end of the DIV element in the style section with the properties you specify.
DIV.ref {line-height: 12pt; background: moccasin}
The previous example uses the class "ref" for the DIV element. To use the styles specified for this element, all you would do is add the attribute CLASS="ref" in the <DIV> tag you want. The ID attribute also works the same as for other tags.
The <SPAN> tag
There is virtually no difference between the <SPAN> tag and the <DIV> tag. Their syntax is the same and more of a logical difference exists. The <DIV> tag is used to divide sections and render them with different styles, whereas the <SPAN> tag is used to span of portions of text and render them different styles. As in the <DIV> tag, you can also use the STYLE, CLASS and ID attributes in the same manner.
Inheritance is also allowed with style sheets, and inheritance for frame sets and tables functions the same as style sheets. You can also control the styles of nested tags with style sheets.
When tags are nested in other tags which have a style specified, these nested tags also inherit that style. For instance:
In this example, we gave a style to the P element and in the body, we put an anchor (<A>) tag inside the <P> tag. Notice in Figure 2.8 that the text in the anchor is the same size as the rest of the text but is still blue and underlined. Why? No properties where specified for color and text-decoration so the tag retains them. This rule holds true for all elements.
This figure demonstrates how nested tags are affected by styles assigned to their parent tag (or the tag that encapsulates the nested tag).
It is possible to specify styles for different instances of nested tags. For instance, if you have an <A> tag nested inside an <H3> tag, you can set the properties for the A element when that "nesting" occurs. The syntax is quite simple. All one does is place the element that is to be nested after the element it is to be nested in (these elements should be separated by a space). When the nested tag specified is nested, then it will use the styles defined by it in the style section of your document.
For example:
We specified styles (a color) for the H3 element in the style section. Right after the style definition for the H3 element, we defined a style for the A tag if it is nested in the <H3> element. So when one uses this style, all the <A> tags nested (or encapsulated) inside <H3> tags will be rendered in a dark-medium blue. All other <A> tags will be rendered normal unless they are encapsulated in other tags that have different default or defined styles.
Many elements can be nested when specifying different styles. For example:
UL UL A {color: red}
This example indicates that an anchor tag nested in an unordered list which is nested in another unordered list is given the color red.
In this section, an example of style sheets will be demonstrated. All the style properties and the methods for implementing them will be used to creatively design a page. Note how the styles are used to create an interesting page. The file stylescool.htm is in Listing 2.13 and can be found on the accompanying CD as stylescool.htm. Figure 2.9 illustrates this listing.
Listing 2.13 STYLESCOOL.HTMùAn Elaborate Usage of Style Sheets
This figure illustrates Listing 2.13. This figure illustrates an extensive use of style sheets. Most of the entities of style sheets mentioned are used in Listing 2.13.
It is not necessary to have all the properties for an element immediately follow one another when specifying multiple properties for an element in the styles section of a document. It might be more helpful to organize them as shown in (the previous listing). With this method, you put each of your properties on a separate line and place them after the curly braces to indicated that these properties belong to the specified element; the properties are more organized and you can clearly spot errors when this method is used.
HTML is a continually evolving language, not only because the standards committees often introduce new drafts and ideas, but because the commercial producers also extend with their own proprietary extensions that are sometimes incorporated into HTML. The HTML 2.0 Document Definition Type, or DTD, is currently in the phase of final review and should become a standard pretty soon. While this final review is going on, it seems as if the standard for the HTML 3.0 DTD is swiftly on its way, but there are several tags and elements that are still under heated discussion.
The new entities of HTML that are in the spotlight now are, of course, client-side scripting capabilities, the usage and standards of objects, client-side image maps, ways to represent mathematical expressions and equations, client-drawn figures, and style sheets. Some of these HTML components are pretty stable and only minor syntax is being discussed. However, other tags and elements of the HTML language are still in the midst of intense discussions.
Style sheets and their usage in HTML will be very effective once fully implemented. Style sheets give the author the ability to create a set of documents using a certain style. This style includes a method of defining different colors and fonts to form a particular feel for the document. Style sheets, according to the current specification, can be separate files and can be imported at will. There can also be multiple style sheets based on different MIME types such as RTF. Particular styles can also be spanned to affect a specified portion of text in an HTML document. Again, this is still under heavy discussion so the information mentioned here is likely to change.
As you can see, objects and scripting are more mature , in development and implementation , than style sheets. Of course, the first implementation of style sheets with Internet Explorer 3.0 beta 1 is pretty impressive, even though only a handful of the proposed properties are supported. Object models and scripting capabilities have already been supported by major browsers such as the Microsoft Internet Explorer and Netscape Navigator, but Internet Explorer can boast one of the more complete implementations of style sheets. Mathematical representation and client-drawn figures are still in the early stages of development, and will probably make significant progress in the second or third quarter of 1996. We have talked about the emerging standards of HTML and how they will affect future versions of HTML, but now let's examine and compare what makes it possible for us to utilize HTML: the Web servers and browsers.
ON THE WEB
The W3C (World Wide Web Consortium) has practically all the documentation available for standards and works in progress on HTML, objects, MIME types, and other standards related to HTML. Their Web site is located at http://www.w3.org/.
This section contains a brief comparison of the leading browsers and servers, and their advantages and disadvantages. This comparison involves Microsoft-based operating systems, since that is the only place where Visual Basic Script is implemented. First, we compare Web browsers in functionality and performance, then we compare Web servers in the same fields. This is not a benchmark comparison or any formal comparison, but more of a general comparison based on use and preference.
The three major browsers, it is fair to say, are the Microsoft Internet Explorer, Mosaic (and all variations), and Netscape Navigator. Internet Explorer is easily the latter of the two, but still it has many advantages. Also, it ties in with both JavaScript and Visual Basic Script, has support for tables and frames, works well with the ActiveX controls, and is free. Plus, Microsoft's Web site is easy to navigate through and is very simple to find information for the consumer and the author. Netscape has very good support for JavaScript and most of the HTML support previously mentioned, but there seems to be no direct support for ActiveX or Visual Basic Script. Also, it is not free. The pioneer Web browser, Mosaic, was developed primarily by the National Center for Supercomputing Applications (NCSA) at the University of Urbana-Champaign in Illinois. This browser does support some HTML 3.0 and has a nice Hotlist feature, but it lacks many of the newer functions including objects, frames, and script support. If you're for die-hard standards, then Mosaic is for you!
ON THE WEB
There is a Netscape plug-in available which will allow you to use Visual Basic Script in Netscape. You can get this add-on at http://www.ncompasslabs.com/.
The status of Web servers is similar to that of browsers. There are several free Web servers that are based on the UNIX NCSA or CERN models. These are somewhat powerful, easy to use, and provide pretty good support for CGI programs. Netscape Enterprise is a very powerful, yet very expensive, Web server that offers full support for Java and CGI programs; Netscape communications also has FastTrack server, which is more of a "desktop" server that can be used by individuals with small connections. Microsoft has the Internet Information Server (ISS), which is free and comes with Windows NT v4.0 Server, and is also available freely for Windows NT. It supports much of what Netscape supports, except JavaScript. IIS supports Visual Basic and works very smoothly with SQL databases. It's an excellent deal for the price. Microsoft also has Vermeer Front Page, which is its counterpart to Netscape's FastTrack server. Vermeer has a fairly decent editor and an excellent organizer, plus it allows extensions to many popular UNIX and PC servers. FrontPage, which is still a beta product, consists of an editor, an organizer, and a Web server, which can run on Windows 95 or NT Server/Workstation.
In this chapter you have learned the fundamental workings of HTML. HTML is an unsophisticated "mark-up" language which is the primary method for communicating hypertext documents across the World Wide Web. Visual Basic Script is an "inline" scripting language which allows you to amplify the interactive content of your web pages. This chapter has helped you understand some of the basic concepts crucial to the use of Visual Basic Script, such as forms and other entities which complement Visual Basic Scripts ability to create truly dynamic web pages. Some of these complementary elements are tables, frame sets and style sheets.
Also covered in this chapter is a brief discussion on the future of HTML and a brief overview of the leading Internet browsers and Web servers. In subsequent chapters, you learn the different functions and methods of Visual Basic Script. Check out the following chapters:
| Previous Chapter | Next Chapter |
| Search | Table of Contents | Book Home Page | Buy This Book |
| Que Home Page | Digital Bookshelf | Disclaimer |
To order books from QUE, call us at 800-716-0044 or 317-361-5400.
For comments or technical support for our books and software, select Talk to Us.
© 1996, QUE Corporation, an imprint of Macmillan Publishing USA, a Simon and Schuster Company.
